<template>
  <!--这是登录弹窗组件-->
  <div class="popup">
    <div class="loginPage">
      <h2 class="popup__tit">
        <a class="pitchUp">登录</a>
        <a>注册</a>
        <div class="esc" @click="esc"></div>
      </h2>
      <slot name="login">
      </slot>
      <slot name="enroll"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "popup",
  methods:{
    esc(){
      this.$emit('esc')
    }
  }
};
</script>

<style scoped lang='less'>
.popup {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  z-index:2;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.2);
  .loginPage {
    width: 600px;
    height: 400px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    border: 1px solid #bfbfbf;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    h2{
        position: relative;
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 17px 0;
        border-bottom: 1px solid #f2f2f2;
        background-image: url('~@/assets/img/hengfu.png');
        background-repeat: no-repeat;
        background-size: contain;
        .esc{
            position: absolute;
            background-image: url('~@/assets/img/esc.png');
             background-repeat: no-repeat;
            background-size: contain;
            width: 40px;
            height: 40px;
            top: 0;
            left: calc(100% - 40px);
        }
        a{
            margin: 0 10px;
            font-size: 16px;
        }
    }
  }
}
.pitchUp{
    color:#31c27c;
}
</style>